<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 表头输入框等 -->
        <el-form ref="pageParams" :model="pageParams">
            <el-row type="flex" class="row-bg" justify="space-between">
              <el-col :span="6"><div class="grid-content bg-purple">
                <el-form-item prop="keyword" label="关键字" label-width="80px">
                  <el-input v-model="pageParams.keyword" type="text" placeholder="根据编号搜索" size="small"></el-input>
                </el-form-item>
              </div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
              <el-col :span="2.5"><div class="grid-content bg-purple">
                <el-button size="small" @click="delKeyWord">清除</el-button>
                <el-button type="primary" size="small" @click="searchKeyWord">搜索</el-button>
              </div></el-col>
            </el-row>
          <el-alert
            v-if="cResultTip"
            :title="cResultTip"
            type="info"
            :closable="false"
            show-icon
          >
          </el-alert>
        </el-form>
        <!-- 表格 -->
        <template>
          <el-table :data="tableData">
            <el-table-column prop="id" align="center" width="200px" label="编号" />
            <el-table-column prop="questionType" align="center" label="题型">
              <template #default="{row}">
                <span v-if="row.questionType === '1'">单选</span>
                <span v-else-if="row.questionType === '2'">多选</span>
                <span v-else-if="row.questionType === '3'">简答</span>
                <span v-else>无</span>
              </template>
            </el-table-column>
            <el-table-column align="center" width="188px" prop="questionIDs" label="题目编号">
              <template #default="{row}">
                <span style="display:block"
                @click="display(row, $event.target.innerHTML)"
                class="color"
                v-for="item in row.questionIDs"
                :key="item.number"
                >{{ item.number }}</span>
              </template>
            </el-table-column>
            <el-table-column width="150px" align="center" prop="addTime" label="录入时间" />
            <el-table-column align="center" prop="totalSeconds" label="答题时间(s)" />
            <el-table-column align="center" prop="accuracyRate" label="正确率(%)" />
            <el-table-column align="center" prop="userName" label="录入人" />
            <el-table-column label="操作" align="center">
              <template #default="{row}">
                <el-button @click="delClick(row)" type="danger" icon="el-icon-delete" plain circle />
              </template>
            </el-table-column>
          </el-table>
        </template>
        <!-- 分页 -->
        <div class="block">
          <el-row type="flex" justify="end" style="height: 60px;" align="middle">
            <el-pagination
              background
              :current-page="pageParams.page"
              :page-size="pageParams.pagesize"
              layout="prev, pager, next, sizes, jumper"
              :total="total"
              @current-change="handleCurrentChange"
              @size-change="hSizeChange"
              >
            </el-pagination>
          </el-row>
        </div>
      </el-card>
    </div>
    <!-- 弹层 -->
    <preview-elastic-layer
      ref='currentDialog'
      :show-dialog.sync="showDialog"
      :currentNodeId="currentNodeId"
    />
  </div>
</template>

<script>
import previewElasticLayer from '../components/questions-previews.vue'
import { randoms as gettableData, removeRandoms } from '../../api/hmmm/questions'
export default {
  components: {
    previewElasticLayer
  },
  data () {
    return {
      // 控制弹层的显示与隐藏
      showDialog: false,
      // 总页面
      total: null,
      // 组题列表
      tableData: [],
      // 维护分页数据的对象:开发中多个不同的变量都是完成同一个效果,可以将他们封装到一个对象中统一维护
      // 提示: 也是为了方便接口使用
      pageParams: {
        page: 1, // 当前页面
        pagesize: 20, // 每页条数
        pages: 0, // 总条数
        keyword: ''
      },
      currentNodeId: null
    }
  },
  created () {
    this.titleList()
  },
  computed: {
    cResultTip () {
      return `共 ${this.total} 条记录`
    }
  },
  methods: {
    // 搜索关键字
    searchKeyWord () {
      clearTimeout(this.timer)
      this.timer = setTimeout(async () => {
        this.titleList()
      }, 500)
    },
    // 控制弹层的显示与隐藏
    display (row, e) {
      this.showDialog = true
      const res = row.questionIDs.filter((item) => {
        return item.number === e
      })
      this.currentNodeId = res[0].id
      console.log(this.currentNodeId)
      this.$nextTick(() => {
        this.$refs.currentDialog.getFoundationDetails()
      })
    },
    // 点击清除事件，清除输入框中的文字
    delKeyWord () {
      this.$refs.pageParams.resetFields()
    },
    // 删除事件
    async delClick (id) {
      this.$confirm('此操作将永久删除该题组,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 调用删除接口
        await removeRandoms({ id: id.id })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 重新刷新界面
        this.titleList()
      })
    },
    // 更改每页显示的条数
    hSizeChange (val) {
      this.pageParams.pagesize = val
      if (this.pageParams.page === 1) {
        this.titleList()
      }
    },
    // 监听分页器的变化
    handleCurrentChange (currentPage) {
      // 更新当前页码
      this.pageParams.page = currentPage
      // 获取对应页的角色列表数据
      this.titleList()
    },
    // 专门封装一个获取组题列表数据的方法，复用
    async titleList () {
      const { data } = await gettableData(this.pageParams)
      this.tableData = data.items
      this.total = data.counts
    }
  }
}
</script>

<style scoped>
.el-form_label {
  padding-left: 30px;
  padding-right: 12px;
  color: #606266;
}
 .color {
  color: #0099ff;
 }
</style>
